import { history, request } from 'umi';
import React, { useState } from 'react';
import './index.css';
import { Button, Form, Input, Modal } from 'antd';
import { CloseOutlined, InfoOutlined } from '@ant-design/icons';
export default function index() {
  // 登入按钮调用
  function login() {
    if (!username && !password) {
      setusermsg('请输入用户名或者密码');
      setIsModalOpen(true);
      return;
    } else {
      let url = '/api/users_login/login';
      request(url, {
        method: 'post',
        data: {
          username: String(username),
          password: String(password),
        },
      }).then((res) => {
        if (res.code == 200) {
          sessionStorage.setItem(
            'tasklistji',
            JSON.stringify([
              {
                id: '1',
                title: '重要',
              },
              {
                id: '2',
                title: '紧急',
              },
              {
                id: '3',
                title: '要命',
              },
            ]),
          );

          window.sessionStorage.setItem('user', res.token);
          sessionStorage.setItem('userMessage', JSON.stringify(res.user[0]));
          history.push('/home/echars/');
        } else {
          console.log(11111);

          console.log(res.msg);
          setusermsg(res.msg);
          setIsModalOpen(true);
        }
      });
    }
  }
  // 存放账号
  const [username, setusername] = useState();
  // 存放密码
  const [password, setpassword] = useState();
  // 控制账号密码错误弹出div的显示和隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 控制提示的信息
  const [usermsg, setusermsg] = useState();
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 获取账号
  function getusername(e) {
    setusername(e.target.value);
  }
  // 获取密码
  function getpassword(e) {
    setpassword(e.target.value);
  }
  function getpasswords(e) {
    return e.keyCode === 13 ? login() : false;
  }
  const [userMessage, setMessage] = useState(
    JSON.parse(sessionStorage.getItem('userMessage')),
  ); //登录之后的用户信息
  return (
    <div className="loginall">
      <div className="login">
        <div className="login_left"></div>
        <div className="login_right">
          <img
            src={require('./img/logo.png')}
            style={{
              width: '190px',
              height: '40px',
              marginTop: '100px',
              marginBottom: '50px',
            }}
            alt=""
          />
          {/* 登入表单 */}
          <div className="login_right_center">
            <div className="login_right_username">
              <label htmlFor="">
                <img
                  style={{ width: '17px', height: '17px' }}
                  src={require('./img/username.png')}
                  alt=""
                />{' '}
                账号
              </label>
              <input type="text" onChange={getusername} />
            </div>
            <div className="login_right_password">
              <label htmlFor="">
                <img
                  style={{ width: '17px', height: '17px' }}
                  src={require('./img/password.png')}
                  alt=""
                />
                密码
              </label>
              <input
                type="password"
                onKeyDown={getpasswords}
                onChange={getpassword}
              />
            </div>
            <div className="login_right_buttom">
              <button onClick={login}>立即登录</button>
            </div>
          </div>
          {/* 底下警告 */}
          <div className="login_right_bottom">
            <p>
              警告：本软件受中国专利法与国际公约保护，未经授权擅自复制全部或部分内容，将接受法律的严厉惩罚！V.20221024
            </p>
          </div>
        </div>
      </div>
      {/* 账号密码错误的对话框 */}
      <div className="logininfo" style={{ display: isModalOpen ? '' : 'none' }}>
        <div className="logininfotop">
          <p>提示对话框</p>
          <span className="logininfotopcha" onClick={handleOk}>
            <CloseOutlined />
          </span>
        </div>
        <div className="logininfocenter">
          <span className="logininfocentertu">
            <InfoOutlined style={{ color: 'white' }} />
          </span>
          <p>{usermsg}</p>
        </div>
        <div className="logininfobottom">
          <button onClick={handleOk}>确定</button>
        </div>
      </div>
      {/* 遮罩层 */}
      <div
        className="cover"
        style={{ display: isModalOpen ? '' : 'none' }}
      ></div>
    </div>
  );
}
